<template>
    <div>
        <tool-bar nav="" title='docker-manifest-json'></tool-bar>
        <el-row :gutter="20" class="grid">
            <el-col :span="10">
                <el-input type="textarea" v-model="$data.txt1"></el-input>
            </el-col>
            <el-col :span="3" class="op_column">
                <el-button @click="gen_click()">生成命令</el-button>
            </el-col>
            <el-col :span="10">
                <el-input type="textarea" v-model="$data.txt2"></el-input>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
/**
 * Created by CodeGenerator
 */



//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"txt1":"","txt2":"","defValue":false,"nullable":true,"embed":[]});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const gen_click = function( ) {
    jv.$saveData("txt1",$data.txt1);
    var layers = JSON.parse($data.txt1)[0].Layers;
    $data.txt2 = "mkdir -p layers \n" +  layers.map(it=>   "tar xvf  " + it  + " -C layers").join("\n");
};

onMounted( function() {
    jv.$loadData("txt1", v=> $data.txt1 = v );
} )



</script>

<style lang="scss" scoped>

.grid {
    position: relative;
    margin-left: 20px !important;
    margin-top: 20px !important;
    display: flex;

    ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
        min-height: 60vh !important;
        height: 70vh;
    }
}

.op_column {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-content: space-around;
    position: relative;
    height: 100%;


    button {
        display: block;
        margin: 10px 6px;
    }

}
</style>